<template>
  <!--  问题解决方式，未解锁      -->
  <view class="allContainer">
    <view class="maskBox" />
    <image class="imgFloatRight" :src="imgPavilion" />
    <image class="textImg" :src="partTextImgUrl" />
    <view :style="[{ marginLeft: '32rpx' }, { marginRight: '32rpx' }]">
      <view class="contentBack">
        <view :style="[{ marginTop: '33rpx' }, { display: 'flex' }]">
          <view class="blackBox"> </view>
          <view style="padding-right: 32rpx">
            <span class="smallTitleGreen">
              根据不同的生活环境以及个人成长过程的不同抉择，每个人会逐渐体现出独特的属性，</span
            >
            <span class="smallTitleRed"> {{ protectorName }}</span>
            <span class="smallTitleGreen"> 察觉到你的六维属性如下：</span>
          </view>
        </view>
      </view>

      <!-- <view :style="[{ marginTop: '33rpx' }]"
          ><span class="smallTitleGreen"> {{ problemSolving.title }}</span>
        </view> -->

      <!-- <view class="gemstonOutsizeBox">
          <text class="gemstoneText">{{ problemSolving.featureList[0] }}</text> -->

      <!-- <view class="gemstoneBox">
            <text class="gemstoneText">{{
              problemSolving.featureList[1]
            }}</text>
            <image
              class="gemstoneImg"
              :src="gemstoneImgUrl"
              :style="[{ width: '228rpx' }, { height: '226rpx' }]"
            />
            <text class="gemstoneText">{{
              problemSolving.featureList[2]
            }}</text>
          </view>

          <text class="gemstoneText">{{ problemSolving.featureList[3] }}</text> -->
      <!-- </view> -->
    </view>
  </view>
</template>

<script>
export default {
  // components: {},
  props: {
    itemIndex: {
      type: Number,
      default: 0,
    },

    isShowBgColor: {
      type: Boolean,
      default: false,
    },

    textImgWidthRpx: {
      type: Number,
      default: 271,
    },

    textImgHeightRpx: {
      type: Number,
      default: 38,
    },

    contentPaddingLeftRpx: {
      type: Number,
      default: 48,
    },

    contentPaddingRightRpx: {
      type: Number,
      default: 200,
    },

    partTextImgUrl: {
      type: String,
      default:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/title6.png",
    },

    protectorName: {
      type: String,
      default: "",
    },

    problemSolving: {
      type: Object,
      default() {
        return {
          featureList: [
            "主导功能感觉",
            "辅助功能思维",
            "第三功能情感",
            "第四功能直觉",
          ],
          subTitle:
            "人格中的每一种功能对解决问题都具有关键和重要作用，忽视任何一个都将导致做出有缺陷的决定，理想化的问题解决功能流程如下：",
          title: "毕方察觉到你的功能运用如下：",
        };
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
      imgPavilion:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/mountain.png",
    };
  },
  watch: {
    itemIndex: {
      handler(val) {
        this.currentIndex = val;
      },
      deep: true, // 深度监听
      immediate: true, // 初始化的时候立刻执行一次
    },
  },
  onReady() {},

  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".allContainer")
      .boundingClientRect((rect) => {
        console.log("rect.height = " + rect.height);
        this.$emit("listenRect", rect, this.currentIndex);
      })
      .exec();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.allContainer {
  position: relative;
  height: 500rpx;
  width: 100%;
  padding-bottom: 60rpx;
  // background-size: 100% auto;
  // background-image: url($img-base + "career/careerAssessResult/bg_part1.png");
  // background-repeat: no-repeat;
  //background-color: #D9E2CC;
  text-align: -webkit-right;
}

.maskBox {
  width: 750rpx;
  height: 410rpx;
  position: absolute;
  bottom: 130rpx;
  z-index: 2;
  background-image: linear-gradient(#00000000, #c6d8c0);
}

.contentView {
  z-index: 1;
  position: absolute;
  width: 100%;
  // padding-left: 48rpx;
  // padding-right: 200rpx;
  //  background-size: 380rpx 277rpx;
  // background-image: url($img-base + "career/careerAssessResult/img_pavilion.png");
  // background-repeat: no-repeat;
  //background-position: top right;
}

.textImg {
  height: 130rpx;
  width: 520rpx;
  image-rendering: -webkit-optimize-contrast;
  z-index: 9;
  position: relative;
}

.smallTitleGreen {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000;
  //line-height: 120rpx;
}
.imgFloatRight {
  position: absolute;
  width: 350rpx;
  height: 500rpx;
  right: 2rpx;
  top: 0rpx;
  z-index: 9;
}
.smallTitleRed {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ed5c22;
  //	line-height: 120rpx;
}

.onePartContent {
  font-size: 28rpx;
  //color: #555555;
  margin-top: 47rpx;
  line-height: 37rpx;
  letter-spacing: 0rpx;

  background-clip: text;
  white-space: normal;
  word-break: break-all;

  color: transparent;
  display: -webkit-box;
  background-image: linear-gradient(#555555, #ff000000);
  -webkit-box-orient: vertical;
  /*设置省略号在容器第2行文本后*/
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blackBox {
  content: "";
  width: 30rpx;
  max-width: 10rpx;
  height: 38rpx;
  margin-top: 6rpx;
  margin-right: 20rpx;
  background: #000;
  color: #000;
  font-size: 26rpx;
}
.gemstonOutsizeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.gemstoneBox {
  display: flex;
  flex-direction: row;
  margin-top: 7rpx;
  margin-bottom: 7rpx;
  align-items: center;
}

.gemstoneImg {
  margin-left: 10rpx;
  margin-right: 10rpx;
}
.contentBack {
  text-align: left;
  position: relative;
  width: 100%;
  margin-top: -10rpx;
  background: linear-gradient(
    to bottom,
    #8de5ba 0%,
    #ccf0d7 50rpx,
    #f6f4df 80rpx,
    #f9f7e5 100%
  );
  padding: 20rpx 0 80rpx 0;
  border-radius: 15rpx 0 15rpx 15rpx;
}
.gemstoneText {
  width: 224rpx;
  height: 40rpx;
  font-family: SourceHanSansCN-Regular;
  font-size: 28rpx;
  font-weight: normal;
  font-stretch: normal;
  //line-height: 37rpx;
  letter-spacing: 0rpx;
  color: #c06b54;
  text-align: center;
  background-image: linear-gradient(
    91deg,
    #cddabe 0%,
    #ddeccc 51%,
    #cfdcc0 100%
  );
  border-radius: 2rpx;
}
</style>
